<template>
    <div class="container">
        <div class="header">

            <div class="box">
                <div class="l">
                    <span class="iconfont icon-yonghu1" style="font-size: 90px;"></span>
                </div>
                <div class="r">
                    <span>{{ this.userTotal }}</span>
                    <span>用户数</span>
                </div>
            </div>

            <div class="box">
                <div class="l">
                    <span class="iconfont icon-icon-test" style="font-size: 90px;"></span>
                </div>
                <div class="r">
                    <span>{{ this.singerTotal }}</span>
                    <span>歌手</span>
                </div>
            </div>

            <div class="box">
                <div class="l">
                    <span class="iconfont icon-gequxinshang" style="font-size: 90px;"></span>
                </div>
                <div class="r">
                    <span>{{ this.songTotal }}</span>
                    <span>歌曲</span>
                </div>
            </div>
            <div class="box">
                <div class="l">
                    <span class="iconfont icon-songlist" style="font-size: 90px;"></span>
                </div>
                <div class="r">
                    <span>{{ this.songListTotal }}</span>
                    <span>歌单</span>
                </div>
            </div>
        </div>
        <div class="middle">
            <div style="width: 31%;">
                <el-card>
                    <div id="main">

                    </div>
                </el-card>
            </div>
            <div style="width: 31%;">
                <el-card>
                    <biaoqian class="biaoqian"></biaoqian>
                </el-card>
            </div>
            <div style="width: 31%;">
                <el-card>
                    <biaoqian class="biaoqian"></biaoqian>
                </el-card>
            </div>
        </div>

        <div class="bottom">
            <el-card>
                <div id="main2">

                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import biaoqian from '@/components/biaoqianyun/index.vue'
export default {
    components:{
        biaoqian
    },
    data(){
        return {
            userTotal:'',
            singerTotal:'',
            songTotal:'',
            songListTotal:''
        }
    },
    methods:{
        async getData(){
            const res = await this.$axios.get("User/SelectRatio")
            this.datas=res
            console.log(res)
        },
        async getAllTotal(){
            const ut = await this.$axios.get("User/SelectUserAll")
            const sit = await this.$axios.get("Singer/SelectTotalSinger")
            const slt = await this.$axios.get("SongList/SelectTotalSongList")
            const sot = await this.$axios.get("Song/SelectToTalSong")
            this.userTotal = ut
            this.singerTotal = sit
            this.songTotal = sot
            this.songListTotal = slt
        }
    },
    mounted(){
        let myChart2 = echarts.init(document.getElementById('main2'))
        myChart2.setOption({
            xAxis: {
                data: ['第一天', '第二天', '第三天', '第四天', '第五天']
            },
            yAxis: {},
            series: [{
                data: [10, 22, 28, 23, 19],
                type: 'line',
                smooth: true
            }]
        });
        let myChart = echarts.init(document.getElementById('main'))
        myChart.setOption({
            series: [
                {
                type: 'pie',
                data: [
                    {
                        value: 335,
                        name: '北京'
                    },
                    {
                        value: 234,
                        name: '天津'
                    },
                    {
                        value: 1548,
                        name: '四川'
                    }]
                }
            ]
        });
    },
    created(){
        this.getData()
        this.getAllTotal()
    }
}
</script>

<style scoped lang="less">
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
}
.header{
    height: 120px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.box{
    height: 100px;
    border: 1px solid rgb(211, 211, 211);
    width: 24%;
    display: flex;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    .l{
        margin: 0 50px;
        color:rgb(211, 211, 211);
        line-height: 100px;
    }
    .r{
        line-height: 100px;
    }
    .r span{
        display: block;
        font-size: 30px;
        width: 100%;
        text-align: center;
        font-weight: 600;
        line-height: 45px;
        color: rgb(211, 211, 211);
    }
}
.middle{
    height:420px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-card{
        width: 100%;
        height: 400px;
        #main{
            width: 100%;
            height: 300px;
        }
    }
}
.biaoqian{
    height: 400px;
    line-height: 400px;
    width: 100%;
}
.bottom{
    width: 100%;
    .el-card{
        width: 100%;
        height: 300px;
        #main2{
            width: 100%;
            height: 300px;
        }
    }
}
</style>